<template>
	<view>
		<!--顶部导航栏-->
		<view class="uni-top-tabbar">
			<scroll-view :scroll-into-view="scrollInto" :scroll="false" :scroll-x="true" :show-scrollbar="false"  class="uni-swiper-tab" :style="{backgroundColor:bgColor} " enable-flex="true">
				<block v-for="(tabBar,index) in tabBars" :key="index">
					<view class="swiper-tab-list" :class="{'active': tabIndex==index}"
						:style="{color:tabIndex==index?selectedTextColor:textColor}" @tap="toggleTab(index)">
						{{tabBar.name}}
						<view class="swiper-tab-line"
							:style="{backgroundColor:tabIndex==index?selectedBottomColor:bgColor}"></view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "UniTopTabbar",
		props: {
			//选中标签栏的索引
			tabIndex: {
				type: Number,
				default: 0
			},

			//导航栏标签内容
			tabBars: {
				type: Array,
				default: [{
						name: '标签1',
						id: 1
					},
					{
						name: '标签2',
						id: 2
					},
					{
						name: '标签3',
						id: 3
					},
					{
						name: '标签4',
						id: 4
					},
					{
						name: '标签5',
						id: 5
					},
					{
						name: '标签6',
						id: 6
					}
				]
			},

			//选中时底部横条颜色
			selectedBottomColor: {
				type: String,
				default: '#30c58d'
			},

			//导航区背景颜色
			bgColor: {
				type: String,
				default: '#ffffff'
			},

			//选中时文字颜色
			selectedTextColor: {
				type: String,
				default: '#343434'
			},

			//默认文本颜色
			textColor: {
				type: String,
				default: '#7d7e80'
			}
		},
		data() {
			return {

			}
		},
		methods: {
			//点击导航栏标签触发
			toggleTab(index) {
				this.$emit("toggleToptab", index)
			}
		}
	}
</script>

<style lang="scss">
	.uni-top-tabbar {
		/* 以下3项设置用于开启底部阴影显示 */
		/* position: relative;
		z-index: 1;
		overflow: visible; */

		.uni-swiper-tab {
			height: 80rpx;
			//设置底部阴影
			// box-shadow: rgba(170, 170, 170, 0.5) 0 2rpx 8rpx 0;
			display: flex;
			text-align: center;

			.swiper-tab-list {
				font-size: 30rpx;
				font-weight: normal;
				line-height: 74rpx;
				//设置标签宽度
				width: 128rpx;

			}

			.active {
				.swiper-tab-line {
					height: 2rpx;
					width: 128rpx;
					margin: auto;
				}
			}
		}
	}

	/deep/ .uni-scroll-view-content {
		display: flex;
		text-align: center;
	}
</style>
